<template>
  <van-nav-bar title="购物车" />

  <van-empty
    v-if="!userData.length"
    image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
    image-size="80"
    description="没有商品"
  >
    <router-link to="/">去购买</router-link>
  </van-empty>
  <div v-else>
    <van-swipe-cell v-for="item in userData">
      <van-card
        :num="item.number"
        :price="item.goods.goods_price"
        :title="item.goods.goods_name"
        class="goods-card"
        :thumb="item.goods_small_logo"
      >
      <template #thumb>
        <div style="display: flex; width: 100%">
          <van-checkbox v-model="item.checked"></van-checkbox>
          <van-image
            style="width: 80px"
            :src="item.goods.goods_small_logo"
          />
        </div>
      </template>
      <template #num>
        <van-stepper
          v-model="item.number"
          theme="round"
          button-size="22"
          disable-input
        />
      </template> 
     </van-card>
      <template #right>
        <van-button
          style="height: 100%"
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="dlenmt"
        />
       
      </template>
   
    </van-swipe-cell>
  </div>

  <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="onClickLink">全选</van-checkbox>
  </van-submit-bar>
</template>

<script setup>
import { computed, ref } from "vue";
import { useCounterStore } from "@/store/cart";
const store = useCounterStore();
let userData = ref([]);
const data = () => {
  let username = localStorage.getItem("username");
  userData.value = store.cart.filter((item) => item.username == username);
};
data();
const dlenmt = (id) => {
  store.delCart(id);
  data();
};
const onClickLink = computed({
  get() {
    if (userData.value.length == 0) {
      return false;
    } else {
      return userData.value.every((item) => item.checked);
    }
  },
  set(val) {
    userData.value.forEach((item) => (item.checked = val));
  },
});
const allprice = computed(() => {
  let allprice = 0;
  let cartok = userData.value.filter((item) => item.checked);
  cartok.forEach((item) => {
    allprice += item.number * item.goods.goods_price;
  });
  return allprice*100
});
</script>

<style lang="scss" scoped>
</style>